<template>
  <div class="activity hideScrollBar" ref="scrollEl">
    <!-- 内容部分 -->
    <div class="content">
      <!-- 背景 -->
      <div class="content-bg"></div>
      <!-- 导航 -->
      <NavBar
        :leftArrow="false"
        isFixed
        :title="$t('activity.rewards')"
        isTransparent
        :navScorllOffset="60"
        navScorllColor="#fff"
        :scrollEl="scrollEl"
      />

      <!-- 内容 -->
      <div class="content">
        <!-- 内容部分 -->
        <ClientOnly>
          <van-pull-refresh
            class="pull-refresh"
            v-model="pageData.loading"
            :pulling-text="t('mvp.other.text9')"
            :loosing-text="t('mvp.other.text10')"
            loading-text=" "
            @refresh="onRefreshRequest"
          >
            <!-- 抽奖入口 -->
            <div
              v-if="pageData.jackpotWiner"
              class="superWiner"
              @click="jumpPage('jackpotWiner')"
            >
              <!-- 背景图片 -->
              <img
                class="superWiner-bg"
                src="/image/activity/superWiner-bg-icon.png"
              />
              <!-- 标题 -->
              <div class="items-center" style="justify-content: center">
                <div class="superWiner-title items-center">
                  <div class="superWiner-title-top">
                    {{ $t("lotteryMoney.cjdyj") }} 2.0
                  </div>
                </div>
              </div>
              <!-- 动画 -->
              <Vue3Lottie
                class="superWiner-vue3Lottie"
                :animationData="astronautJSON"
                :autoPlay="pauseAnimation"
                :pauseAnimation="pauseAnimation"
              />
              <div
                class="superWiner-btn"
                :data-text="$t('lotteryMoney.qcjbtn')"
                @click="jumpPage('jackpotWiner')"
              >
                <div class="superWiner-btn-mc"></div>
                {{ $t("lotteryMoney.qcjbtn") }}
                <div class="superWiner-btn-gy"></div>
              </div>

              <!-- 手指的动画 -->
              <img
                class="superWiner-szdh"
                src="/image/lotterymoney/lotterymoney-rksh-icon.svg"
              />
            </div>
            <!-- hashpk + 抽奖 -->
            <div class="group">
              <div class="group-title items-center">
                <img
                  class="group-title-icon"
                  src="/image/activity/group-hot-icon.svg"
                />
                <div class="group-title-value">{{ $t("activity.rmhd") }}</div>
              </div>
              <div
                class="items-center"
                style="justify-content: space-between; align-items: flex-start"
              >
                <div
                  v-for="item in cjktGroup"
                  :key="item.JumpID"
                  class="group-item"
                  @click.stop="
                    () => {
                      if (!item.disabled) jumpPage(item.JumpID, item.isApp);
                    }
                  "
                >
                  <div class="group-item-bg">
                    <img class="group-item-img" :src="item.logo" />
                    <div class="group-item-title">
                      <div class="group-item-title-line">{{ item.title }}</div>
                      <img
                        class="group-item-jump"
                        src="/image/activity/group-jump-icon.svg"
                      />
                    </div>

                    <div
                      v-if="item.disabled"
                      class="group-item-disabled items-center"
                    >
                      <div
                        class="items-center"
                        style="
                          position: relative;
                          width: 100%;
                          justify-content: center;
                        "
                      >
                        <!-- <img
                          class="group-item-disabled-icon"
                          src="/image/activity/group-item-disabled.png"
                        /> -->
                        <div class="group-item-disabled-text">
                          {{ $t("activity.hdxx") }}
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="group-item-text">
                    {{ item.desc }}
                  </div>
                </div>
              </div>
            </div>
            <!-- 空投+兑换码-7天焕活-直播间 -->
            <div class="group">
              <div class="group-title items-center">
                <div class="group-title-value">{{ $t("activity.qthd") }}</div>
              </div>
              <div>
                <template v-for="(item, index) in lyhhhkzbGroup">
                  <div
                    v-if="item.isShow"
                    :key="item.JumpID"
                    class="items-center"
                    :class="{
                      'group-item2-hh7DayNotShow':
                        !item.hh7DayNotShow &&
                        index != lyhhhkzbGroup.length - 1,
                    }"
                    :style="{
                      display: pageData.isShow ? 'none' : 'flex',
                    }"
                    @click.stop="
                      () => {
                        if (!item.disabled) jumpPage(item.JumpID, item.isApp);
                      }
                    "
                  >
                    <div class="group-item2-bg">
                      <img class="group-item2-img" :src="item.logo" />
                      <img
                        class="group-item2-jump"
                        src="/image/activity/group-jump-icon.svg"
                      />
                      <div
                        v-if="item.disabled"
                        class="group-item2-disabled items-center"
                      >
                        <div
                          class="items-center"
                          style="
                            position: relative;
                            width: 100%;
                            justify-content: center;
                          "
                        >
                          <img
                            class="group-item2-disabled-icon"
                            src="/image/activity/group-item-disabled.png"
                          />
                          <div class="group-item2-disabled-text">
                            {{ item.disabledText }}
                          </div>
                        </div>
                      </div>
                    </div>
                    <div style="flex: 1">
                      <div class="group-item2-title">
                        <div class="group-item2-title-line">
                          {{ item.title }}
                        </div>
                      </div>
                      <div class="group-item2-text">
                        {{ item.desc }}
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
            <!-- BDC 质押 -->
            <div class="group" @click="jumpPage('pledge')">
              <div class="group-title items-center">
                <div class="group-title-value">
                  {{ $t("pledge.pageTitle") }}
                </div>
              </div>
              <div class="items-center">
                <div class="group-item1">
                  <img
                    class="group-item-hfimg"
                    src="/image/activity/pledge-logo.png"
                  />
                  <div v-if="false" class="group-item-text">
                    {{ $t("activity.zydesc") }}
                  </div>
                </div>
              </div>
            </div>
          </van-pull-refresh>
        </ClientOnly>
      </div>
    </div>
  </div>
</template>
<script setup name="activity">
import { getLatestStudioLive } from "@/api/reward";
import {
  navigateI18nTo,
  switchTabBar,
  getOssFileUrl,
  isiOS,
  jumpLocalH5PageRoute,
} from "@/utils";
import { JUMPAPPS } from "~/config";
import { queryAirdropConfig } from "@/api/airdrop";
import { useUserStore } from "~~/store/modules/user";
import { useGlobalStore } from "~~/store/global";
import { Vue3Lottie } from "vue3-lottie";
import { useFetch as http } from "@vueuse/core";
import { useLotteryMoneyStore } from "~~/store/modules/lottery-money";
import { usePageCacheStore } from "~~/store/modules/pageCache";

const globalStore = useGlobalStore();
// 如果没有登录-直接跳转登录页面
if (!globalStore.$state.token && process.client) {
  bridge.onAppLogin();
}
// definePageMeta({
//   keepalive: true,
// });

const { t } = useI18n();
const scrollEl = ref();

// 获取缓存数据
const pageCache = usePageCacheStore();
// firebase埋点
const firebase = useInitFirebase(); // 初始化firebase
const userState = useUserStore();
const lotteryMoneyStore = useLotteryMoneyStore();
// 页面属性
const pageData = reactive({
  loading: false, // 是不是下拉刷新,true 则重新获取数据
  whiteTheme: false,
  liveId: "", // 直播间 id
  indicators: 0,
  accountType: 0, // 0:普通用户账号 1:测试号 2:官方主播
  reactiveStatus: false, // 唤活活动:是否正常展示,反之已下线
  raffleStatus: false, // 抽奖:是否正常展示,反之已下线
  exchangeCodeStatus: false, // 兑换码:是否正常展示,反之已下线
  airdropActivityShowStatus: false, // 空投:是否正常展示,反之已下线
  superWiner: false, // 抽美金入口-是否展示
  jackpotWiner: false, // V3 抽美金入口-是否展示
});

// 资源
const file = getOssFileUrl({
  lottery: "/image/activity/lottery-icon.png",
  airdrop: "/image/activity/airdrop-icon1.svg",
  code: "/image/activity/code-icon.png",
  arousal7: "/image/activity/lyhhh7-icon.png",
  liveRoom: "/image/activity/liveroom-icon.png",
  pledge: "/image/activity/pledje-logo.svg",
  hashpk: "/image/activity/hashpk-icon.svg",
  entranceJson: "/lottie/lottery-v3/entrance.json",
});

// hashpk抽奖+第一版抽奖: 永远都展示.点击的时候才判断是否有权限
const cjktGroup = ref([
  {
    isShow: true, // 是否可以展示
    disabled: false, // 是否禁用点击
    disabledText: t("activity.hdxx"), // 禁用文案
    title: `hash PK`,
    desc: `${t("lotteryMoney.xzdqmjdj")}`,
    logo: file.hashpk, // 图片地址
    JumpID: "superWiner",
    isApp: false,
  },
  {
    isShow: true, // 是否可以展示
    disabled: false, // 是否禁用点击
    disabledText: t("activity.hdxx"), // 禁用文案
    title: t("lottery.xybx"),
    desc: `${t("activity.hdjjMax")} ${t("activity.cjyq")}`,
    logo: file.lottery, // 图片地址
    JumpID: "lottery",
    isApp: false,
  },
]);

// 空投+兑换码+老用户焕活+看直播: 7 日焕活会根据字段来决定是否展示
const lyhhhkzbGroup = ref([
  {
    isShow: true, // 是否可以展示
    disabled: false, // 是否禁用点击
    disabledText: t("activity.hdxx"), // 禁用文案
    title: t("airdrop.bdckt"),
    desc: `${t("activity.hdktMax")}`,
    logo: file.airdrop, // 图片地址
    JumpID: "airdrop",
    isApp: false,
  },
  {
    isShow: true, // 是否可以展示
    disabled: false, // 是否禁用点击
    disabledText: t("activity.hdxx"), // 禁用文案
    title: t("activity.dhmTitle"),
    desc: t("activity.dhmDesc"),
    logo: file.code, // 图片地址
    JumpID: "redeemCode",
    isApp: false,
  },
  {
    isShow: false, // 是否可以展示
    disabled: false, // 是否禁用点击
    disabledText: t("activity.hdxx"), // 禁用文案
    title: t("mvp.other.rjl7"),
    desc: `${t("arousalUser.hl7")} ${t("arousalUser.pageTitle")}`,
    logo: file.arousal7, // 图片地址
    JumpID: "arousalUser",
    isApp: false,
  },
  {
    isShow: false, // 是否可以展示
    hh7DayNotShow: true, // 7 日焕活不展示的样式
    disabled: false, // 是否禁用点击
    disabledText: t("activity.hdxx"), // 禁用文案
    title: t("activity.kzbsq"),
    desc: t("activity.kzbshl"),
    logo: file.liveRoom, // 图片地址
    JumpID: "live",
    isApp: true,
  },
]);

// 页面刷新请求
const onRefreshRequest = () => {
  try {
    const c = queryAirdropConfigRequest();
    Promise.all([c]).finally(() => {
      pageData.loading = false;
    });
  } catch (error) {
    pageData.loading = false;
  }
};

// 获取直播间数据
const getLatestStudioLiveRequest = (isAlert = false) => {
  return getLatestStudioLive({
    discoverType: 6,
    areaCode: userState.$state.areaCode,
  }).then((res) => {
    // console.log("直播间数据", res);
    if (res) {
      if (
        res.commonData &&
        res.commonData.discoveryList &&
        res.commonData.discoveryList.length > 0
      ) {
        res.commonData.discoveryList.forEach((e) => {
          if (e.data_type == 3 && e.live_status) {
            pageData.liveId = e.live_status.live_id;
          }
        });
        if (pageData.liveId) lyhhhkzbGroup.value[3].disabled = false;
      } else {
        pageData.liveId = "";
        lyhhhkzbGroup.value[3].disabled = true;
      }
    }
  });
};

// 获取入口权限
const entryPermission = (res) => {
  /****************** zhjdebugger ******************/
  // res.jackpotWiner = 0;
  /****************** zhjdebugger ******************/

  // 抽奖 V3
  pageData.jackpotWiner = res.jackpotWiner == 1;
  // 抽美金: 特殊账户人员可以看,但是不能下注
  pageData.superWiner = res.superWiner == 1;
  lotteryMoneyStore.$patch((state) => {
    state.isShowInviteLottery = !!res.inviteCode && res.accountType == 0;
    state.inviteLotteryCode = res.inviteCode || ""; // 邀请码
  });
  // 抽奖
  pageData.raffleStatus = res.raffleStatus == 1;
  cjktGroup.value[0].disabled = res.raffleStatus != 1;
  // cjktGroup.value[0].disabled = true;
  // 空投
  pageData.airdropActivityShowStatus = res.airdropActivityShowStatus == 1;
  cjktGroup.value[1].disabled = res.airdropActivityShowStatus != 1;
  // 7 日焕活
  lyhhhkzbGroup.value[2].isShow = res.reactiveStatus == 1;
  lyhhhkzbGroup.value[3].hh7DayNotShow = res.reactiveStatus != 1;
  pageData.reactiveStatus = res.reactiveStatus == 1;
  // 兑换码
  lyhhhkzbGroup.value[1].disabled = res.exchangeCodeStatus != 1;
  // 兑换码
  pageData.exchangeCodeStatus = res.exchangeCodeStatus == 1;
  // 特殊名单
  pageData.accountType = res.accountType;
};
const queryAirdropConfigRequest = () => {
  return queryAirdropConfig().then((res) => {
    if (res) {
      console.log("--聚合入口--", res);
      entryPermission(res);
    }
  });
};

// 超级大赢家动画入口:属性
const lottieWidth = ref(120);
const astronautJSON = ref(null);
const pauseAnimation = ref(false);
// 何时执行动画
const animationWatchStop = watch(
  [() => pageData.jackpotWiner, () => astronautJSON],
  ([newVal0, newVal1]) => {
    if (newVal0 && !!newVal1) {
      // console.log("加载动画");
      setTimeout(() => {
        pauseAnimation.value = true;
      }, 1);
    }
  }
);

onMounted(() => {
  // 1. 埋点
  firebase?.logEvent("BDC_H5_Rewards_PUV");
  pauseAnimation.value = false;
  // 2.获取入口动画 old "https://bdc.btcdana.org/fx/lottie/lottery-money/index.json"
  http(file.entranceJson).then((res) => {
    if (res.data.value) {
      astronautJSON.value = JSON.parse(res.data.value);
    }
  });
  // 3. 入口权限
  const permission = pageCache.getPageData("activity-Config-info");
  if (permission) {
    entryPermission(permission);
  } else {
    queryAirdropConfigRequest();
  }
  // 4. 直播入口查询
  getLatestStudioLiveRequest();
});

onBeforeUnmount(() => {
  animationWatchStop && animationWatchStop();
});

// 点击-页面跳转
const jumpPage = async (val, isApp = false, params) => {
  // console.log("--val--", val);
  if (isApp) {
    if (val == "live") {
      firebase?.logEvent("BDC_H5_Rewards_Click_Live_Jump");
      // 1. loading
      showLoadingToast({
        message: `${t("common.requestIng")} ...`,
        forbidClick: true,
        duration: 15000,
        wordBreak: "break-word",
      });
      getLatestStudioLiveRequest(true).then(() => {
        // closeToast();
        if (pageData.liveId) {
          bridge.jumpAppRoute(
            JUMPAPPS({ liveId: pageData.liveId })["liveRoom"]
          );
        } else {
          showToast(t("activity.zbyjs"));
        }
      });
    } else if (val.ios_url || val.android_url) {
      firebase?.logEvent("BDC_H5_Rewards_Click_Banner_Jump");
      // 原生桥接跳转
      if (
        val.ios_url.startsWith("native://") ||
        val.android_url.startsWith("https://btcdana.com/")
      ) {
        console.log("--bridge.jumpAppRo--");
        bridge.jumpAppRoute(isiOS.value ? val.ios_url : val.android_url);
      }
      // 第三方链接跳转
      else {
        let thirdUrl = isiOS.value ? val.ios_url : val.android_url;
        // 如果是跳转自己的 h5 页面,则走导航跳转
        if (thirdUrl.startsWith(location.origin + "/fx/")) {
          // 方案一： 路由跳转
          jumpLocalH5PageRoute(thirdUrl);
          // 方案二： 链接加参数
          // jumpLocalH5PageUrl(thirdUrl)
        } else if (thirdUrl.includes("webview=1")) {
          navigateI18nTo({
            path: "/webview",
            query: { src: thirdUrl, title: val.name },
          });
        } else {
          await navigateTo(thirdUrl, {
            external: true,
          });
        }
      }
    }
  } else if (val === "superWiner") {
    if (pageData.superWiner) {
      if (pageData.accountType == 0) {
        firebase?.logEvent("BDC_H5_Rewards_Click_SuperWiner_Jump");
        navigateI18nTo({
          path: "/lottery-money",
        });
      } else showToast(t("common.zwqx"));
    } else {
      showToast(t("lotteryMoney.gcyzj"));
      navigateI18nTo({
        path: "/lottery-money",
      });
    }
  } else if (val === "jackpotWiner") {
    if (pageData.jackpotWiner) {
      if (pageData.accountType == 0) {
        firebase?.logEvent("BDC_H5_Rewards_Click_SuperWinerV3_Jump");
        navigateI18nTo({
          path: "/lottery-v3",
        });
      } else showToast(t("common.zwqx"));
    } else {
      showToast(t("lotteryMoney.gcyzj"));
    }
  } else if (val === "redeemCode") {
    if (pageData.exchangeCodeStatus && pageData.accountType == 0) {
      navigateI18nTo({
        path: "/activity/redeemCode",
      });
    } else {
      showToast(t("common.zwqx"));
    }
  } else if (val === "pledge") {
    firebase?.logEvent("BDC_H5_Rewards_Click_Pledge_Jump");
    switchTabBar("pledge__");
  } else if (val === "airdrop") {
    if (pageData.airdropActivityShowStatus && pageData.accountType == 0) {
      firebase?.logEvent("BDC_H5_Rewards_Click_Airdrop_Jump");
      navigateI18nTo({
        path: "/airdrop",
      });
    } else showToast(t("common.zwqx"));
  } else if (val === "lottery") {
    if (pageData.raffleStatus && pageData.accountType == 0) {
      firebase?.logEvent("BDC_H5_Rewards_Click_Lottery_Jump");
      navigateI18nTo({
        path: "/lottery",
      });
    } else showToast(t("common.zwqx"));
  } else if (val === "arousalUser") {
    firebase?.logEvent("BDC_H5_Rewards_Click_ArousalUser_Jump");
    navigateI18nTo({
      path: "/arousal-user",
    });
  }
};
</script>
<style lang="scss" scoped>
.activity {
  position: relative;
  background-color: #f4f9fe;
  height: calc(100vh - 50 * 2px);
  overflow-y: scroll;
  overflow-x: hidden;
  will-change: scroll-position;
  padding-bottom: 20 * 2px;

  &-code {
    margin-left: 8 * 2px;
    color: #141924;
    font-size: 14 * 2px;
    font-weight: 510;
  }
  .content {
    position: relative;
    &-bg {
      position: absolute;
      top: 0;
      left: 0px;
      width: 100vw;
      height: 300 * 2px;
      background: linear-gradient(
        180deg,
        #2a91ff 8.07%,
        rgba(226, 236, 255, 0.3) 99.93%
      );
    }
  }
}
.superWiner {
  position: relative;
  width: 100vw;
  height: 315 * 2px;
  overflow: hidden;
  &-title {
    margin-top: 10 * 2px;
    padding: 10 * 2px 15 * 2px;
    justify-content: center;
    flex-direction: column;
    border-radius: 12 * 2px;
    border: 2px solid #00e7b5;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    // 可以渐变但是没有圆角
    // border: 10px solid; /* 边框宽度 */
    // border-image: linear-gradient(to right, red, yellow, green, blue) 1; /* 边框渐变色 */

    &-top {
      color: #fffbcf;
      font-size: 17 * 2px;
      font-weight: 1000;
      // margin-bottom: 8 * 2px;
    }
    &-bottom {
      color: #0050a7;
      font-size: 13 * 2px;
    }
  }
  &-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
  }
  &-vue3Lottie {
    height: 215 * 2px;
    margin-top: 0;
    padding-bottom: 12 * 2px;
    scale: 1.38;
  }
  &-btn {
    @keyframes scalebtn {
      0% {
        transform: scale(1) translateX(-50%);
      }
      50% {
        transform: scale(1.15) translateX(-50%);
      }

      100% {
        transform: scale(1) translateX(-50%);
      }
    }
    animation: scalebtn 0.7s linear infinite alternate;
    // animation-delay: 1s;
    // transform: translate3d(0, 0, 0); // 启用硬件加速
    position: absolute;
    bottom: 12 * 2px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%); /* Safari 和 iOS 浏览器 */
    padding: 6.5 * 2px 35 * 2px;
    border-radius: 100px;
    overflow: hidden;
    border: 3px solid #ffaf36;
    background: linear-gradient(180deg, #ffd772 0%, #ffae19 50%, #ff7801 100%);
    transform-origin: bottom left;
    font-size: 15 * 2px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0px 2px 8px #f16500;
    &-mc {
      position: absolute;
      left: 6%;
      bottom: 4%;
      width: 88%;
      height: 96%;
      border-radius: 100px;
      background: linear-gradient(
        180deg,
        #ffe6a878 0%,
        rgba(255, 163, 48, 0) 100%
      );
    }
    &-gy {
      position: absolute;
      z-index: 9;
      left: 0;
      top: 3 * 2px;
      width: 25 * 2px;
      height: 25 * 2px;
      border-radius: 100px;
      background: linear-gradient(
        270deg,
        #fffaa0 0%,
        rgba(255, 250, 160, 0) 46.91%
      );
      filter: blur(6px);
      @keyframes leftrightGy {
        0% {
          transform: translateX(-12px);
        }

        100% {
          left: calc(100% - 30px);
        }
      }
      animation: leftrightGy 1s linear infinite;
    }
  }
  &-szdh {
    position: absolute;
    bottom: 28 * 2px;
    width: 24 * 2px;
    height: 28 * 2px;
    left: 60%;
    transform: translateX(-50%);
    @keyframes fluctuation {
      0% {
        transform: translate(0, -57%);
      }
      100% {
        transform: translate(0, 0%);
      }
    }
    animation: fluctuation 0.4s linear infinite alternate;
  }
}

.group {
  min-height: 239px;
  background-color: #fff;
  border-radius: 12 * 2px;
  padding: 15 * 2px;
  margin-bottom: 15 * 2px;

  &-title {
    border-bottom: 2px solid #e8eaf0;
    padding-bottom: 16 * 2px;
    margin-bottom: 16 * 2px;
    &-icon {
      width: 20 * 2px;
      height: 20 * 2px;
      margin-right: 4 * 2px;
    }
    &-value {
      color: #000;
      font-size: 15 * 2px;
      font-weight: 590;
    }
  }
  // 抽奖/空投
  &-item {
    width: 176 * 2px;
    &-disabled {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 16px;
      background: rgba(0, 0, 0, 0.25);
      justify-content: center;
      &-icon {
        height: 56 * 2px;
      }
      &-text {
        position: absolute;
        border-radius: 8px;
        background: rgba(0, 123, 255, 0.6);
        backdrop-filter: blur(4px);
        color: #e8eaf0;
        font-size: 13 * 2px;
        font-weight: 590;
        padding: 5 * 2px 8 * 2px;
      }
    }
    &-bg {
      position: relative;
      background: linear-gradient(108deg, #cce4ff 0%, #fff 100%);
      backdrop-filter: blur(4px);
      height: 100 * 2px;
      margin-bottom: 10 * 2px;
      border-radius: 6 * 2px;
      overflow: hidden;
    }
    &-title {
      &-line {
        // @include multi-line-omit(2);
        word-break: auto-phrase !important;
      }

      position: absolute;
      top: 10 * 2px;
      left: 10 * 2px;
      color: #002853;
      font-size: 13 * 2px;
      font-weight: 590;
      max-width: 55%;
      word-break: break-word !important;
    }
    &-jump {
      // position: absolute;
      // top: 52 * 2px;
      // left: 10 * 2px;
      margin-top: 10 * 2px;
      width: 18 * 2px;
      height: 18 * 2px;
    }
    &-img {
      position: absolute;
      bottom: 0;
      right: 0;
      height: 100 * 2px;
    }
    &-hfimg {
      // height: 100 * 2px;
      margin-bottom: 10 * 2px;
      border-radius: 6 * 2px;
      overflow: hidden;
    }
    &-text {
      @include multi-line-omit(2);
      word-break: keep-all;
      color: #999da7;
      font-size: 13 * 2px;
    }
  }
  // 质押
  &-item1 {
    width: 100%;
    &-img {
      width: 100%;
      height: 100 * 2px;
      margin-bottom: 10 * 2px;
      border-radius: 6 * 2px;
      overflow: hidden;
    }
    &-text {
      @include multi-line-omit(2);
      color: #999da7;
      font-size: 13 * 2px;
    }
  }
  // 直播,焕活
  &-item2 {
    &-hh7DayNotShow {
      margin-bottom: 15 * 2px;
    }
    &-disabled {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 16px;
      background: rgba(0, 0, 0, 0.25);
      justify-content: center;
      &-icon {
        height: 56 * 2px;
      }
      &-text {
        position: absolute;
        border-radius: 8px;
        background: rgba(0, 123, 255, 0.6);
        backdrop-filter: blur(4px);
        color: #e8eaf0;
        font-size: 13 * 2px;
        font-weight: 590;
        padding: 5 * 2px 8 * 2px;
      }
    }
    &-bg {
      position: relative;
      width: 176 * 2px;
      background: linear-gradient(108deg, #cce4ff 0%, #fff 100%);
      backdrop-filter: blur(4px);
      height: 100 * 2px;
      margin-right: 15 * 2px;
      border-radius: 6 * 2px;
      overflow: hidden;
    }
    &-title {
      @include multi-line-omit(2);
      color: #002853;
      line-height: 18 * 2px; /* 138.462% */
      font-size: 13 * 2px;
      font-weight: 590;
      word-break: break-word !important;
      margin-bottom: 8 * 2px;
    }
    &-jump {
      position: absolute;
      top: 50%;
      left: 10 * 2px;
      transform: translateY(-50%);

      width: 18 * 2px;
      height: 18 * 2px;
    }
    &-img {
      position: absolute;
      bottom: 0;
      right: 0;

      height: 100 * 2px;
    }
    &-text {
      @include multi-line-omit(2);
      word-break: keep-all;
      color: #999da7;
      font-size: 13 * 2px;
      line-height: 18 * 2px; /* 138.462% */
    }
  }
}
</style>
